<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        form {
            display: flex;
            width: 500px;
            margin: 100px auto;

            box-shadow: 0px 0 2px 1px pink;
            flex-wrap: wrap;
        }

        input {
            flex: 1;
            height: 30px;
            margin: 10px;
            margin-right: 10px;
        }

        select {
            height: 30px;
            margin: 10px;
            margin-right: 10px;
        }


        button {
            margin: 10px;
            width: 50px;
            height: 30px;
        }

        textarea {
            margin: 10px;
            width: 480px;
            height: 100px;
        }

        .tab1 {
            display: grid;
            /* grid-template-rows: 1fr 1fr; */
            /* grid-template-columns: repeat(3, 33.3%); */
            grid-template-columns: 1fr 1fr 1fr;
            width: 700px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            margin: 50px auto;
            list-style: none;
            box-shadow: 0px 0 2px 1px skyblue;
        }



        .tab2 {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            line-height: 70px;
            text-align: center;
            list-style: none;
            box-shadow: 0px 0 2px 1px rgb(37, 111, 129);
            font-size: 12px;
        }

        .tab1-li:nth-child(n+2),
        .tab2-li:nth-child(n+2) {
            border-left: 1px solid #000;
        }

        .tab1-li:hover,
        .tab2-li:hover {
            background: yellow;
        }

        .lisSelect,
        .Select {
            background: skyblue;
        }

        .box {
            position: relative;
            margin: auto;
            width: 700px;
            height: 300px;
            box-shadow: 0px 0px 2px 1px springgreen;
        }

        .box span {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .box span:nth-child(n+2) {
            display: none;
        }

        .max {
            position: fixed;
            right: -350px;
            top: 100px;
            width: 350px;
            height: 500px;
            background: rgb(224, 228, 230);
            box-shadow: 0px 0px 2px 1px rgb(37, 111, 129);
        }

        .guide {
            position: fixed;
            right: 0;
            top: 350px;
            transform: translateY(-50%);
            width: 70px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            box-shadow: 0px 0px 2px 1px rgb(37, 111, 129);
        }

        .bj:nth-child(n+2) {
            display: none;
        }

        .esc {
            float: left;
        }
    </style>
</head>

<body>
    <form>
        <input type="text" placeholder="请输入标题..." required lay-verify="required">

        <select>
            <option value="all">所有状态</option>
            <option value="true">发布</option>
            <option value="false">存草稿</option>
        </select>
        <button>确认</button>
        <textarea placeholder="请输入内容"></textarea>
    </form>


    <div class="release">
        <ul class="tab1">
            <li class="tab1-li Select">Test 1</li>
            <li class="tab1-li">Test 2</li>
            <li class="tab1-li">Test 3</li>
        </ul>
        <div class="box">
            <span class="aj">Test 1</span>
            <span class="aj">Test 2</span>
            <span class="aj">Test 3</span>
        </div>

    </div>
    <div class="guide">草稿栏</div>
    <div class="max">
        <ul class="tab2">
            <li class="tab2-li">Test 1</li>
            <li class="tab2-li">Test 2</li>
            <li class="tab2-li">Test 3</li>
        </ul>
        <button class="esc">退出</button>
        <div class="draft">
            <span class="bj">
                <button class="fason">发送</button>
                <button class="genggai">更改</button>
                <br>
                <div class="draftTxt">Test 1</div>
            </span>
            <span class="bj">
                <button class="fason">发送</button>
                <button class="genggai">更改</button>
                <br>
                <div class="draftTxt">Test 2</div>
            </span>
            <span class="bj">
                <button class="fason">发送</button>
                <button class="genggai">更改</button>
                <br>
                <div class="draftTxt">Test 3</div>
            </span>
        </div>
    </div>


    <!-- 发布tab栏 -->
    <script type="text/html" id='tpl-table-1'>
        <li class="tab1-li">{{title}}</li>
    </script>
    <!-- 发布内容栏 -->
    <script type="text/html" id='tpl-table-2'>
    <span class="aj">{{content}}</span>
    </script>
    <!-- 草稿tab栏 -->
    <script type="text/html" id='tpl-table-3'>
        <li class="tab2-li">{{title}}</li>
    </script>
    <!-- 草稿内容栏 -->
    <script type="text/html" id='tpl-table-4'>

        <span class="bj">
            <button class="fason">发送</button>
            <button class="genggai">更改</button>
            <br>
         <div class="draftTxt">{{content}}</div>
        </span>
    </script>

    <script src="./js/lunbo.js"></script>
    <script src="./lib/layui/layui.all.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./jq/jquery.js"></script>

    <script>
        const max = document.querySelector('.max');
        $('form').on('submit', function (e) {
            e.preventDefault();
            const strArr = {
                title: $('input').val(),//获取标题
                state: $('select').val(),//获取状态
                content: $('textarea').val()//获取内容
            };
            if (strArr.content == '') {
                return alert('还是说点是什么吧')
            }

            render(strArr)
            $('input').val('')
            $('textarea').val('')
        })

        function render(strArr) {
            // 如果状态为false则为草稿栏
            if (strArr.state == 'false') {
                renderDraft(strArr)
                return
            }
            // 使用模板字符串
            const newListr = template('tpl-table-1', strArr);
            // console.log(newListr);
            $('.tab1').append(newListr);
            // 记录标题个数
            let len = $('.tab1-li').length
            // console.log(len);
            // 利用网格布局合理分配标题空间
            $('.tab1').attr({
                style: `grid-template-columns: repeat(${len},1fr)`
            })
            // 发布状态为选中状态
            $('.tab1-li').eq(len - 1).addClass('lisSelect').siblings().removeClass('lisSelect')
            // 使用模板字符串添加内容部分
            const newBoxStr = template('tpl-table-2', strArr);
            $('.box').append(newBoxStr);
            // 发布显示
            let i = $('.aj').length - 1
            $('.aj').eq(i).show().siblings().hide()

        };
        // 设立渲染草稿栏函数
        function renderDraft(strArr) {
            const newMoxStr = template('tpl-table-3', strArr);
            $('.tab2').append(newMoxStr)
            let lentab = $('.tab2-li').length
            // console.log(lentab);
            $('.tab2').attr({
                style: `grid-template-columns: repeat(${lentab},1fr)`
            })

            const draftStr = template('tpl-table-4', strArr)
            $('.draft').append(draftStr)

        }


        // 点击切换栏切换效果
        $('.tab1').on('click', '.tab1-li', function () {

            $('.tab1-li').eq(0).removeClass('Select')
            // 根据当前索引切换
            const index = $(this).index()
            $(this).addClass('lisSelect').siblings().removeClass('lisSelect');
            $('.aj').eq(index).show().siblings().hide()
        })
        // 点击切换栏切换效果
        $('.tab2').on('click', '.tab2-li', function () {
            // 根据当前索引切换
            const index = $(this).index()
            $(this).addClass('lisSelect').siblings().removeClass('lisSelect');
            $('.bj').eq(index).show().siblings().hide()
        });

        $('.guide').on('click', function () {
            const winWidth = $(window).width();

            animate(max, winWidth - 350)
            $(this).hide()
        });
        // 点击esc键退出草稿页面
        $(document).on('keyup', function (e) {
            if (e.keyCode == 27) {
                animate(max, 9999)
                $('.guide').show()
            }
        })
        // 退出点击函数
        $('.esc').on('click', function () {
            animate(max, 9999)
            $('.guide').show()
        })
        // 点击更改
        $('.max').on('click', ".genggai", function () {
            // const index = $(this).index()
            // 获取当前内容
            const str = $(this).siblings(".draftTxt").text();
            // console.log(str);
            // 将当前内容现实成输入框
            $(this).siblings(".draftTxt").html(`<textarea placeholder="请输入内容"></textarea>`);
            // 获取到当前输入框
            const input = $(this).siblings(".draftTxt")[0].children[0];

            // console.log(input);
            // 将当前内容赋值带输入框
            input.value = str;
            // 让输入框处于选中状态
            input.select();
            input.onblur = function () {
                //     // 失去焦点 将值赋予文本
                input.parentNode.innerHTML = input.value;
            }
            // 回车键快捷操作
            input.onkeyup = function (e) {
                if (e.keyCode == 13) this.blur();
            };
        });
        // 草稿tab更改
        $('.max').on('dblclick', ".tab2-li", function () {
            // 获取当前内容
            const str = this.innerHTML;
            // 更改样式
            this.innerHTML = `<input type="text">`;
            // 获取当前结构
            const input = this.children[0];
            // 将当前值赋值给输入框中
            input.value = str;
            // 选中状态
            input.select();
            input.onblur = function () {
                // 失去焦点 将值赋予文本
                input.parentNode.innerHTML = input.value;
            }
            input.onkeyup = function (e) {
                if (e.keyCode == 13) this.blur();
            };
        });
        $('.max').on('click', '.fason', function () {
            // alert(11)
            const index = $(this).parent().index()
            // console.log(index);

            const change = {
                title: $('.tab2-li').eq(index).text(),
                content: $(this).siblings('.draftTxt').text()
            }
            console.log(change);
            const changeTit = template('tpl-table-1', change);
            const changeCot = template('tpl-table-2', change);
            console.log(changeTit, changeCot);
            $('.tab1').append(changeTit);
            $('.box').append(changeCot);
            // render()
            // 记录标题个数
            let len = $('.tab1-li').length
            // console.log(len);
            // 利用网格布局合理分配标题空间
            $('.tab1').attr({
                style: `grid-template-columns: repeat(${len},1fr)`
            })
            // 发布状态为选中状态
            $('.tab1-li').eq(len - 1).addClass('lisSelect').siblings().removeClass('lisSelect');
            // 发布显示
            let i = $('.aj').length - 1
            $('.aj').eq(i).show().siblings().hide()

        })

    </script>
</body>

</html>